<template>
	<view>
		<view class="kong">
			
		</view>
		<view class="order_search">
		        <image src="../../static/TestImg/sousuo.png" id="sousuo">
		        <input type="text" placeholder="可用商品名称，店铺名，收件人搜索我的订单"
		            class="kuang">
		        <text class="youshang" @click="quxiao">取消</text>
		    </view>
		    <view class="lishijilu">
		        <text class="lishi">历史记录</text>
		        <text class="shanchu"><image src="../../static/TestImg/shanchu.png"  class="shanchu1"></image></text>
		    </view>
		    <view class="jilu">
		        <a href="">
		            <view class="shanchudingdan"><text>搜索历史</text></view>
		        </a>
		        <a href="">
		            <view class="shanchudingdan"><text>搜索历史</text></view>
		        </a>
		        <a href="">
		            <view class="shanchudingdan"><text>搜索历史</text></view>
		        </a>
		        <a href="">
		            <view class="shanchudingdan"><text>搜索历史</text></view>
		        </a>
		        <a href="">
		            <view class="shanchudingdan"><text>搜索历史</text></view>
		        </a>
		
		    </view>
		    <view class="cainixiangsou">
		        <view class="lishijiluq">
		            <view class="lishi">
		                <text class="cainixiangsou_name">猜你想搜</text>
					
		                <image src="../../static/TestImg/shuaxin.png" id="shuaxin">	</image>
						<text class="huan">换一换</text>
		            </view>
		            <view class="xiangxi">
		                <view class="xiangxi_name">
		                    实用眼影盘
		                </view>
		                <view class="xiangxi_name">
		                    实用眼影盘
		                </view>
		                <view class="xiangxi_name">
		                    实用眼影盘
		                </view>
		                <view class="xiangxi_name">
		                    实用眼影盘
		                </view>
		            </view>
		
		        </view>
		    </view>
		    <view class="cainixiangsou_chang">   
		        <view class="lishijiluq">
		            <view class="lishi_chang">
		                <text>常用分类</text>
		            </view>
		            <view class="xiangxi_cai">
						<!-- 示例图片，从后端拿到放入 -->
		                <image src="../../static/TestImg/boy.jpg" alt=""  class="fang_image">
		                <text class="fang">防晒</text>
		            </view>
					<view class="xiangxi_cai">
						<!-- 示例图片，从后端拿到放入 -->
					    <image src="../../static/TestImg/boy.jpg" alt=""  class="fang_image">
					    <text class="fang">防晒</text>
					</view>
					<view class="xiangxi_cai">
						<!-- 示例图片，从后端拿到放入 -->
					    <image src="../../static/TestImg/boy.jpg" alt=""  class="fang_image">
					    <text class="fang">防晒</text>
					</view>
					<view class="xiangxi_cai">
						<!-- 示例图片，从后端拿到放入 -->
					    <image src="../../static/TestImg/boy.jpg" alt=""  class="fang_image">
					    <text class="fang">防晒</text>
					</view>
					<view class="xiangxi_cai">
						<!-- 示例图片，从后端拿到放入 -->
					    <image src="../../static/TestImg/boy.jpg" alt=""  class="fang_image">
					    <text class="fang">防晒</text>
					</view>
					<view class="xiangxi_cai">
						<!-- 示例图片，从后端拿到放入 -->
					    <image src="../../static/TestImg/boy.jpg" alt=""  class="fang_image">
					    <text class="fang">防晒</text>
					</view>
					<view class="xiangxi_cai">
						<!-- 示例图片，从后端拿到放入 -->
					    <image src="../../static/TestImg/boy.jpg" alt=""  class="fang_image">
					    <text class="fang">防晒</text>
					</view>
					<view class="xiangxi_cai">
						<!-- 示例图片，从后端拿到放入 -->
					    <image src="../../static/TestImg/boy.jpg" alt=""  class="fang_image">
					    <text class="fang">防晒</text>
					</view>
		          
		        </view>
		    </view>              
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			quxiao(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

}
<style scoped>
	.kong{
		width: 100%;
		height: 60rpx;
	
	}
.order_search {
            width: 100%;
            height: 80rpx;
            margin-top: 40rpx;

            position: relative;
            box-sizing: content-box;
        }
.fang_image{
	width:120rpx;
	height:120rpx;}
        .order_search>.kuang {
            width: 80%;
            height: 60rpx;
            border-radius: 200rpx;
            margin-top: 12rpx;
            margin-left: 20rpx;
			font-size: 25rpx;
			background-color: aliceblue;
			text-indent: 2em;
        }
.huan{
	position: absolute;
	right: 5%;
}
        #sousuo {
            position: absolute;
            left: 30rpx;
            top: 15rpx;
            font-size: 40rpx;
			width: 40rpx;
			height: 40rpx;
        }

        .youshang {
            position: absolute;
            right: 30rpx;
            top: 15rpx;
            font-size: 30rpx;
            color: rgb(132, 132, 132);
            color: rgb(132, 132, 132);
        }

        .lishijilu {
            width: 100%;
            height: 40rpx;

            margin-top: 20rpx;

        }

        .shanchu {
            display: inline-block;
            width: 100rpx;
            margin-left: 63%;
            text-align: right;
			
        }
		.shanchu1 {
			width: 40rpx;
			height: 40rpx;
		}

        a {
            text-decoration: none;
            color: black;
        }

        .lishi {
            width: 20%;
           margin-left: 20rpx;
        }

        .jilu {
            width: 100%;
            height: 140rpx;
            margin-top: 40rpx;

            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .shanchudingdan {

            width: 160rpx;
            height: 50rpx;
            border-radius: 40rpx;
            font-size: 30rpx;
            text-align: center;
            margin-top: 20rpx;
            margin-left: 20rpx;
            background-color: rgb(244, 242, 242);

        }

        .shanchudingdan>text {
            box-sizing: border-box;

        }

        .cainixiangsou {
            width: 100%;
            height: 200rpx;
            
            margin-top: 40rpx;
            display: flex;
            justify-content: space-evenly;
        }

        #shuaxin {
			
            display: inline-block;
            width: 40rpx;
			height: 40rpx;
            position: absolute;
            right: 20%;
            color: rgb(78, 78, 78);

        }

        /* .lishi>text {
            margin-left: 20rpx;
        } */

        .lishijiluq {
            width: 100%;
            height: 40rpx;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            position: relative;
        }

        .xiangxi {
            width: 100%;
            height: 100rpx;

            margin-top: 30rpx;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .xiangxi_name {
            width: 45%;
            height: 30rpx;
            margin-left: 20rpx;
            color: rgb(78, 78, 78);
        }

        .xiangxi_cai {
            width: 160rpx;
            height: 200rpx;
            margin-top: 20rpx;
           
            position: relative;
        }

        .cainixiangsou_chang {
            width: 100%;
            height: 600rpx;
          
            margin-top: 40rpx;
            display: flex;
            justify-content: space-evenly;
        }

        .fang_image {
            position: absolute;
            top: 20rpx;
            left: 24rpx;
            border-radius: 50%;
        }

        .fang {
            position: absolute;
            top: 150rpx;
            left: 50rpx;

        }
        .lishi_chang{
            width: 100%;
            height: 60rpx;
            margin-left: 20rpx;
            
        }
        .cainixiangsou_name{
        position: relative;
        left: -300rpx;
        }
</style>
